<template>
    <div class="markdown-content" v-html="renderedContent"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'

// 定义props
interface Props {
    content: string
    options?: marked.MarkedOptions
}

const props = withDefaults(defineProps<Props>(), {
    content: '',
    options: () => ({
        breaks: true, // 支持换行
        gfm: true, // GitHub风格Markdown
        sanitize: false, // 允许HTML标签
        smartLists: true, // 智能列表
        smartypants: true, // 智能标点
    })
})

// 配置marked选项
marked.setOptions(props.options)

// 渲染Markdown内容
const renderedContent = computed(() => {
    if (!props.content) return ''

    try {
        return marked(props.content)
    } catch (error) {
        console.error('Markdown渲染错误:', error)
        // 如果渲染失败，返回原始内容
        return props.content.replace(/\n/g, '<br>')
    }
})
</script>

<style scoped>
.markdown-content {
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 标题样式 */
.markdown-content :deep(h1),
.markdown-content :deep(h2),
.markdown-content :deep(h3),
.markdown-content :deep(h4),
.markdown-content :deep(h5),
.markdown-content :deep(h6) {
    margin: 16px 0 8px 0;
    font-weight: 600;
    line-height: 1.25;
}

.markdown-content :deep(h1) {
    font-size: 1.5em;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 8px;
}

.markdown-content :deep(h2) {
    font-size: 1.3em;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 6px;
}

.markdown-content :deep(h3) {
    font-size: 1.1em;
}

/* 段落样式 */
.markdown-content :deep(p) {
    margin: 8px 0;
}

/* 列表样式 */
.markdown-content :deep(ul),
.markdown-content :deep(ol) {
    margin: 8px 0;
    padding-left: 24px;
}

.markdown-content :deep(li) {
    margin: 4px 0;
}

/* 代码样式 */
.markdown-content :deep(code) {
    background-color: #f6f8fa;
    border-radius: 3px;
    padding: 2px 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
}

.markdown-content :deep(pre) {
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
    margin: 12px 0;
}

.markdown-content :deep(pre code) {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* 引用样式 */
.markdown-content :deep(blockquote) {
    border-left: 4px solid #dfe2e5;
    margin: 12px 0;
    padding: 0 16px;
    color: #6a737d;
}

/* 链接样式 */
.markdown-content :deep(a) {
    color: #0366d6;
    text-decoration: none;
}

.markdown-content :deep(a:hover) {
    text-decoration: underline;
}

/* 表格样式 */
.markdown-content :deep(table) {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}

.markdown-content :deep(th),
.markdown-content :deep(td) {
    border: 1px solid #dfe2e5;
    padding: 8px 12px;
    text-align: left;
}

.markdown-content :deep(th) {
    background-color: #f6f8fa;
    font-weight: 600;
}

/* 水平线样式 */
.markdown-content :deep(hr) {
    border: none;
    border-top: 1px solid #eaecef;
    margin: 16px 0;
}

/* 强调样式 */
.markdown-content :deep(strong) {
    font-weight: 600;
}

.markdown-content :deep(em) {
    font-style: italic;
}

/* 删除线样式 */
.markdown-content :deep(del) {
    text-decoration: line-through;
}

/* 图片样式 */
.markdown-content :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 任务列表样式 */
.markdown-content :deep(input[type="checkbox"]) {
    margin-right: 8px;
}

/* 代码高亮主题适配 */
.markdown-content :deep(.hljs) {
    background: #f6f8fa;
    color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .markdown-content :deep(pre) {
        padding: 12px;
        font-size: 0.9em;
    }

    .markdown-content :deep(table) {
        font-size: 0.9em;
    }

    .markdown-content :deep(th),
    .markdown-content :deep(td) {
        padding: 6px 8px;
    }
}
</style>